<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';

import {
  Badge,
  Button,
  Card,
  CardMeta,
  Col,
  Descriptions,
  DescriptionsItem,
  Row,
  Space,
} from 'ant-design-vue';

import Icon from '#/components/Icons';

import DeliveryModalView from './DeliveryModal.vue';

const orderTypes: any = { goods: '商品', recharge: '充值' };

const orderStatusType: any = {
  '-1': '关闭订单',
  '0': '未付款',
  '1': '已支付',
  '2': '已完成',
  '20': '待发货',
  '30': '待收货',
  '60': '待评价',
  '40': '已退款',
};
const order = ref();
const is_delivery = ref(false);

const [DeliveryModal, DeliveryModalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: DeliveryModalView,
  onClosed() {
    is_delivery.value = true;
  },
});
/** 打开发货窗口 */
const handleDelivery = () => {
  DeliveryModalApi.setData(order.value);
  DeliveryModalApi.open();
};
const [Modal, formModalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  onBeforeClose() {
    const modalData = DeliveryModalApi.getData();
    if (modalData.isUpdata) {
      formModalApi.setData({ isUpdata: true });
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const values: any = formModalApi.getData();
      order.value = values;
    }
  },
});

watch(
  () => is_delivery.value,
  (value) => {
    if (value === true) {
      formModalApi.close();
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>
<template>
  <Modal class="w-3/5" title="订单详情">
    <DeliveryModal />
    <Descriptions :column="4" bordered>
      <DescriptionsItem :span="2" label="订单号码">
        {{ order.out_trade_no }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="订单时间">
        {{ formatDateTime(order.create_time * 1000) }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="订单类型">
        {{ orderTypes[order.order_type] }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="订单金额">
        ¥{{ order.amount }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="订单状态">
        {{ orderStatusType[order.status] }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="下单用户">
        用户名： {{ order.user.user_nickname ?? order.user.user_login }}
        <br />
        ID：{{ order.user_id }}
      </DescriptionsItem>

      <DescriptionsItem :span="2" label="支付方式">
        {{ order.pay.pay_type }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="支付时间">
        {{ order.pay.status ? formatDateTime(order.pay.pay_time * 1000) : '-' }}
      </DescriptionsItem>
      <DescriptionsItem :span="4" label="支付状态">
        <Badge
          :status="order.pay.status ? 'success' : 'error'"
          :text="order.pay.status ? '已支付' : '未支付'"
        />
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="收件人">
        {{ order.more.address.name }}
      </DescriptionsItem>
      <DescriptionsItem :span="2" label="收件人电话">
        {{ order.more.address.phone }}
      </DescriptionsItem>
      <DescriptionsItem :span="4" label="收件地址">
        {{ order.more.address.address
        }}{{ order.more.address.detailed_address }}
      </DescriptionsItem>
      <DescriptionsItem :span="4" label="商户信息">
        {{ order.merchant.name }}
      </DescriptionsItem>
      <DescriptionsItem :span="4" label="商品信息">
        <Row :gutter="16">
          <Col v-for="goods in order.more.goods_list" :key="goods.id" :span="8">
            <Card :bordered="false">
              <template #cover>
                <img :src="goods.imagePath" />
              </template>
              <CardMeta>
                <template #title>
                  {{ goods.goods_title }}
                </template>
                <template #description>
                  <p class="text-sm">规格:{{ goods.suk }}</p>
                  <p class="text-sm">数量:{{ goods.goods_num }}</p>
                  <p class="text-sm">单价:{{ goods.goods_price }}</p>
                </template>
              </CardMeta>
            </Card>
          </Col>
        </Row>
      </DescriptionsItem>
    </Descriptions>
    <template #footer>
      <div class="m-2">
        <Space wrap>
          <Button
            :disabled="order.status !== 20"
            type="primary"
            @click="handleDelivery"
          >
            <span class="anticon">
              <Icon icon="ri:send-plane-line" />
            </span>
            发货
          </Button>
        </Space>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
